<template>
	<div class="main">
		<div class="custom-style">
			<el-button class="top-item_title" style="margin: 0 12px 0 0" @click="addNew">新增课程</el-button>
			<el-upload
				ref="uploadRef"
				class="top-item_title"
				:show-file-list="false"
				action="#"
				:http-request="importFile"
				:limit="1"
			>
				<el-button type="primary">导入课程</el-button>
			</el-upload>
			<div style="clear: both"></div>
		</div>
		<courselist :key="keyCourse" @showChapters="showChapters"></courselist>
	</div>
</template>

<script lang="ts" setup>
import courselist from '../components/course-list.vue';
import { useCool } from '/@/cool/hooks';
import { delCourseById } from '/@/api/course';
import { importCourseExcel } from '/@/api/file/index';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const { router } = useCool();
let keyCourse = ref(1);
const showChapters = async (item, type) => {
	if (type == 'edit') {
		await router.push({
			path: '/course/detail',
			query: Object.assign({}, item, { type: 'edit' })
		})
	} else if (type == 'delete') {
		await delCourseById(item.id);
		keyCourse.value = new Date().getTime()
	}
}
const addNew = () => {
	router.push({
		path: '/course/detail',
		query: { type: 'add' }
	})
}

const importFile = async (file) => {
	let res = await importCourseExcel(file.file);
	if (res.code == 200) {
		ElMessage.success('导入课程成功！');
	}
}
</script>

